<template>
	<view>
		<view v-if="watching.length==0">
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无记录">
			</u-empty>
		</view>

		<view v-else class="watch_list" v-for="(item,index) in watching" :key="index" @click="toVideoDetail(item)">
			<view>
				<image class="watch-pic" :src="item.tv_image"></image>
			</view>

			<view style="margin-left: 40rpx;">
				<view class="tv_name">{{item.tv_name||"视频不存在"}}</view>
				<u-gap height="30rpx"></u-gap>
				<text style="color: #333;font-size: 30rpx;" v-if="item.series">看到第{{item.series}}集</text>
				<text style="color: #333;font-size: 30rpx;" v-else>视频不存在</text>
				<u-gap height="30rpx"></u-gap>
				<view style="font-size: 28rpx;" v-if="item.update_witch">更新至第{{item.update_witch}}集</view>
				<view style="font-size: 28rpx;" v-else>数据更新中...</view>
			</view>
			<view style="margin-left: 40rpx;" @click.stop="delRecore(item._id)">
				<u-icon name="trash-fill" color="#fd6666" size="28"></u-icon>
			</view>

			<!-- <button type="default" @click.stop="delRecore(item._id)">删除</button> -->
		</view>

		<u-gap height="30rpx"></u-gap>
	</view>
</template>

<script>
	const db = uniCloud.database();
	export default {
		data() {
			return {
				page: 1,
				watching: [],
			}
		},
		async onShow() {
			this.loadData()
		},

		async onReachBottom() {
			const moreList = await db.collection("a_history").where({
				user_id: vk.vuex.get('$user.userInfo._id') || "no"
			}).orderBy('_add_time', 'desc').limit(100).skip(this.page * 100).get()

			this.watching = this.watching.concat(moreList.result.data)
			this.page = this.page + 1
		},
		methods: {
			async loadData() {
				uni.showLoading({
					title: "加载中..."
				});
				const watchList = await db.collection("a_history").where({
					user_id: vk.vuex.get('$user.userInfo._id') || "no"
				}).orderBy('_add_time', 'desc').limit(100).get()

				this.watching = watchList.result.data
				this.gengxin(watchList.result.data)
				uni.hideLoading();
			},
			async gengxin(dataList) {
				for (var i = 0; i < dataList.length; i++) {
					const tv_temp = await db.collection('a_tv_series').where({
						tv_id: dataList[i].tv_id
					}).orderBy('series', 'desc').limit(1).get()
					dataList[i].update_witch = tv_temp.result.data[0].series
				}
				console.log("dataList=", dataList);
				this.watching = [];
				this.watching = dataList;
			},
			async delRecore(id) {
				const del = await db.collection('a_history').doc(id).remove()
				this.loadData()
				uni.showToast({
					title: "删除成功"
				})
			},
			async toVideoDetail(item) {
				if (item.tv_id) {
					const tvinfo = await db.collection('a_tv').doc(item.tv_id).get()
					item = tvinfo.result.data[0]
				}

				vk.vuex.set('$app.currenttv', item)
				uni.navigateTo({
					url: '/pages/player/player?tv_id=' + item._id,
				})
			},
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f1f1f1;
	}

	.watch_list {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		background-color: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
	}

	.tv_name {
		font-size: 32rpx;
		font-weight: 600;
		width: 300rpx;
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.watch-pic {
		width: 167rpx;
		height: 250rpx;
		border-radius: 10rpx;
		margin: 14rpx 0rpx 14rpx 14rpx;
	}
</style>
